// Old Syntax, Old Plugins-- Do not reproduce and see my converted pen for latest libs as of 02/20/2020

var tree1 = '<svg class="tree" viewBox="15 -40 20 40">' +
    '<path class="trunk" d="m25,5 l-1,32 a2,2 0 0,0 2,0 l-1,-32"/>' +
    '<path d="m25,5 a10,10 0 0 1 -2,6" class="left"/>' +
    '<path d="m25,8 a5,5 0 0 1 -2,3" class="left"/>' +
    '<path d="m25,5 a15,15 0 0 0 3,9" class="right"/>' +
    '<path d="m25,10 a6,6 0 0 0 2,3.5" class="right"/>' +
    '<path d="m25,8 a8,8 0 0 1 -4,8" class="left"/>' +
    '<path d="m25,10 a6,6 0 0 1 -3,6" class="left"/>' +
    '<path d="m25,11 a9,9 0 0 0 6,8" class="right"/>' +
    '<path d="m25,13 a8,8 0 0 0 5,6.5" class="right"/>' +
    '<path d="m25,16 a8,8 0 0 0 3,3.5" class="right"/>' +
    '<path d="m25,12 a9,9 0 0 1 -6,9" class="left"/>' +
    '<path d="m25,14 a8,8 0 0 1 -5,7.5" class="left"/>' +
    '<path d="m25,15 a7,7 0 0 1 -3,6.5" class="left"/>' +
    '<path d="m25,22 a10,10 0 0 0 8,5" class="right"/>' +
    '<path d="m25,23 a9,9 0 0 0 7,4.5" class="right"/>' +
    '<path d="m25,24 a8,8 0 0 0 4,3.5" class="right"/>' +
    '<path d="m25,18 a8,8 0 0 1 -6,8" class="left"/>' +
    '<path d="m25,22 a7,7 0 0 1 -4,4" class="left"/>' +
    '<path d="m25,18 a6,6 0 0 0 6,5" class="right"/>' +
    '<path d="m25,20 a7,7 0 0 0 3,3" class="right"/>' +
    '<path d="m25,23.5 a7,7 0 0 1 -8,5" class="left"/>' +
    '<path d="m25,25.5 a8,8 0 0 1 -6,4" class="left"/>' +
    '<path d="m25,27 a8,8 0 0 1 -3,2.5" class="left"/>' +
    '<path d="m25,27 a9,9 0 0 0 9,4" class="right"/>' +
    '<path d="m25,28 a9,9 0 0 0 8,4" class="right"/>' +
    '<path d="m25,29 a10,10 0 0 0 6,3.5" class="right"/>' +
    '<path d="m25,30 a7,7 0 0 0 3,2.5" class="right"/>' +
    '<path d="m25,29 a9,9 0 0 1 -9,4" class="left"/>' +
    '<path d="m25,30 a9,9 0 0 1 -8,4" class="left"/>' +
    '<path d="m25,31 a10,10 0 0 1 -6,3.5" class="left"/>' +
    '<path d="m25,32 a7,7 0 0 1 -3,2.5" class="left"/>' +
    '</svg>';

var tree2 = '<svg class="tree" viewBox="15 -40 20 40">' +
    '<path class="trunk" d="m25,22 l-0.5,15 a1,1 0 0,0 1,0 l-0.5,-15"/>' +
    '<path d="m25,18 a10,10 0 0 1 -2,6" class="left"/>' +
    '<path d="m25,21 a5,5 0 0 1 -2,3" class="left"/>' +
    '<path d="m25,18 a15,15 0 0 0 3,9" class="right"/>' +
    '<path d="m25,23 a6,6 0 0 0 2,3.5" class="right"/>' +
    '<path d="m25,21 a8,8 0 0 1 -4,8" class="left"/>' +
    '<path d="m25,23 a6,6 0 0 1 -3,6" class="left"/>' +
    '<path d="m25,24 a9,9 0 0 0 6,8" class="right"/>' +
    '<path d="m25,26 a8,8 0 0 0 5,6.5" class="right"/>' +
    '<path d="m25,29 a8,8 0 0 0 3,3.5" class="right"/>' +
    '<path d="m25,25 a9,9 0 0 1 -6,9" class="left"/>' +
    '<path d="m25,27 a8,8 0 0 1 -5,7.5" class="left"/>' +
    '<path d="m25,28 a7,7 0 0 1 -3,6.5" class="left"/>' +
    '</svg>';


function spawnTrees() {
    $('#trees').fadeOut(1000, () => {
        $("#floor").show()
        buildTrees(50);
        TweenMax.set($('.tree path:not(.trunk)'), {drawSVG: 0});
        TweenMax.staggerFrom('.tree', 1, {onStart: animateTree, onStartParams: ["{self}"]}, 0.05);
    });
}

function killTrees() {
    let children = $('#trees').children();
    $('#trees').fadeOut(1000, function () {
        children.remove();
        $("#floor").hide()
    });
}

function animateTree(tree) {
    var $this = tree.target;
    var branches = $('path:not(.trunk)', $this),
        leftBranches = $('path.left', $this),
        rightBranches = $('path.right', $this),
        floor = $('#floor');
    tl = new TimelineMax();

    TweenMax.to(floor, .3, {height: "10%"});
    TweenMax.set(leftBranches, {rotation: -20, transformOrigin: 'top right'});
    TweenMax.set(rightBranches, {rotation: 20});

    tl.to($($this), 0.75, {
        attr: {
            viewBox: '15 -3 20 40'
        },
        ease: Back.easeOut
    })
        .add(TweenMax.staggerTo(branches, 0.5, {drawSVG: '100%', ease: Power1.easeOut}, 0.03), '-=0.25')
        .add(TweenMax.staggerTo(branches, 2, {rotation: 0, ease: Elastic.easeOut}, 0.03), '-=1.25');

}

function buildTrees(count) {
    let trees = $('#trees');
    let container = $('#trees-container');

    container.css('display', 'block');
    trees.css('display', 'block');
    for (var i = 0; i < count; i++) {
        trees.append(Math.random() > 0.25 ? tree1 : tree2);
    }
}



